<template>
	<view class="container">
		<TopNav title="发布动态" bg-color="#fff"></TopNav>
		<view class="header flex justify-center bg-white">
			<subsection :list="sectionList" width="240" v-model="sectionCurrent" @change="handleSecionChange">
			</subsection>
		</view>
		<view class="main main-fixed-bottom" v-show="sectionCurrent === 0">
			<view class="bg-white radius p-lr16 p-t13 p-b12 m-t10">
				<view class="">
					<text class="f-w600 f-s15 line-height22">内容</text>
				</view>
				<view class="m-t12">
					<u-textarea v-model="form.content" placeholder="请输入发布内容" count border="none" height="250rpx"
						placeholderClass="textarea-placeholder" maxlength="100" style="color:#202020;"></u-textarea>
				</view>
			</view>
			<view class="bg-white radius p-lr16 p-t13 p-b12 m-t10">
				<view class="flex ">
					<view class="tag">
						<view class="tag-item" v-for="(item,index) in mediaSectionList" :key="index"
							@click="handleMediaSecionChange(item)"
							:class="{'tag-active':item.value === mediaSectionCurrent}">
							<text>{{item.label}}</text>
						</view>
					</view>
				</view>
				<view class="m-t10" v-if="mediaSectionCurrent === 0">
					<view class="">
						<text class="f-w600 f-s15 line-height22">图片</text>
					</view>
					<view class="m-t8">
						<text class="f-s12 f-w400 text-gray line-height17">最多上传3张图片，总大小不超过50M</text>
					</view>
					<view class="m-t10">
						<UploadImage width="210rpx" height="210rpx" :limit="3" v-model="form.pic" :multiple="true">
							<view class="upload-image">
								<image src="/static/images/login/photo.png" class="width-28" mode="widthFix"></image>
								<text class="m-t8 text-gray f-s12">上传图片</text>
							</view>
						</UploadImage>
					</view>
				</view>
				<view class="m-t10" v-else>
					<view class="">
						<text class="f-w600 f-s15 line-height22">视频</text>
					</view>
					<view class="m-t8">
						<text class="f-s12 f-w400 text-gray line-height17">最多上传1段视频，总大小不超过50M</text>
					</view>
					<view class="m-t10">
						<UploadVideo width="210rpx" height="210rpx" v-model="form.pic">
							<view class="upload-image">
								<image src="/static/images/login/video.png" class="width-28" mode="widthFix"></image>
								<text class="m-t8 text-gray f-s12">上传视频</text>
							</view>
						</UploadVideo>
					</view>
				</view>
			</view>
		</view>
		<view class="main bg-white p-t15" style="min-height:100vh" v-show="sectionCurrent === 1">
			<view class="u-demo-block">
				<view class="u-demo-block__content" v-for="(item,index) in list" :key="item.id">
					<view class="">
						<view class="flex">
							<image :src="item.technician.avatar" class="round width-40 height-40 shrink-0" mode="">
							</image>
							<view class="flex flex-direction m-l15">
								<text class="f-s16 f-w600">{{item.technician.realname}}</text>
								<text class="m-t10 ">{{item.conent}}</text>
							</view>
						</view>
						<view class="flex m-t10">
							<view class="width-40 height-40 shrink-0"></view>
							<view class="flex-1 p-l15">
								<u-album :urls="item.pic"
									v-if="(item.pic && item.pic.length) && item.type === 0"></u-album>
								<view v-if="(item.pic && item.pic.length) && item.type === 1">
									<view class="video" @click="handlePrevideo(item.pic[0])">
										<image :src="item.pic[0] + '?x-oss-process=video/snapshot,t_0,f_jpg'"
											class="height-80" mode="heightFix"></image>
										<image src="/static/images/index/video.png"
											class="width-50 height-50 video-play" mode="widthFix">
										</image>
									</view>
								</view>

								<view class="flex justify-between m-t10">
									<text>{{item.create_time}}</text>
									<view class="text-right p-r30" hover-class="pressed"
										@click="handleRemove(item.id,index)">
										<text class="text-blue">删除</text>
									</view>
								</view>

								<view class="line m-t20 m-b20">

								</view>
							</view>
						</view>

					</view>

				</view>
			</view>
			<view class="padding-tb-xs" v-if="total !== 0">
				<u-loadmore :status="loadmoreStatus" line @loadmore="handleScrollBottom" />
			</view>
			<Empty :show="total === 0"></Empty>
		</view>
		<view class="fixed-bottom p-lr16" v-show="sectionCurrent === 0">
			<view class="self-btn flex flex-direction full-width" hover-class="pressed" @click="handleSubmit">
				<text class="f-s16 line-height22">发布</text>
			</view>
		</view>
		<Toast></Toast>
		<Modal :show.sync="modalShow" title="提示" content="您确认要删除这条动态吗?" @confirm="handleModalConfirm"></Modal>
		<u-overlay :show="overlayShow" @click="overlayShow = false">
			<view class="full-width full-height">
				<video :src="videoUrl" class="full-width full-height relative flex justify-end" autoplay
					auto-pause-if-navigate :show-fullscreen-btn="false" id="video">
					<cover-image src="/static/images/order/close-2.png" class="width-30 height-30 absolute"
						style="top:60px;left:calc(100% - 40px);" @click.stop="overlayShow = false"></cover-image>
				</video>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	import Modal from "@/components/modal"
	import UploadImage from '@/components/upload-image/index.vue'
	import UploadVideo from '@/components/upload-video/index.vue'
	import subsection from "@/components/subsection/index.vue";
	import mixins from "@/mixins";
	import Empty from "@/components/empty/index.vue"
	import {
		trends,
		trendsList,
		trendsRemove
	} from "@/api/mine"
	export default {
		components: {
			UploadImage,
			UploadVideo,
			subsection,
			Modal,
			Empty
		},
		mixins: [mixins],
		data() {
			return {
				overlayShow: false,
				videoUrl: '',
				modalShow: false,
				list: [],
				total: 0,
				queryParams: {
					page: 1,
					limit: 5
				},
				form: {
					content: '',
					pic: '',
					type: 0,
				},
				sectionCurrent: 0,
				sectionList: [{
					label: "发布动态",
					value: 0
				}, {
					label: "我的动态",
					value: 1
				}],
				mediaSectionCurrent: 0,
				mediaSectionList: [{
					label: "发布相册",
					value: 0
				}, {
					label: "发布视频",
					value: 1
				}],
				deleteInfo: {}
			};
		},
		onReachBottom() {
			this.handleScrollBottom()
		},
		methods: {
			handlePrevideo(url) {
				this.videoUrl = url
				this.overlayShow = true
			},
			handleModalConfirm() {
				trendsRemove({
					id: this.deleteInfo.id
				}).then(res => {
					this.list.splice(this.deleteInfo.index, 1)
				})
			},
			handleRemove(id, index) {
				this.deleteInfo = {
					id,
					index
				}
				this.modalShow = true

			},
			getList() {
				trendsList(this.queryParams).then(res => {
					let {
						data: {
							list,
							count,
							total
						}
					} = res
					this.total = count || 0
					this.pageTotal = total || 0
					if (this.queryParams.page === this.pageTotal) this.loadmoreStatus = 'nomore'
					if (this.queryParams.page === 1) {
						this.list = list
					} else if (this.queryParams.page < this.pageTotal) {
						this.list = this.list.concat(list)
					}
				})
			},
			handleMediaSecionChange(select) {
				this.form.type = select.value
				if (this.mediaSectionCurrent !== select.value) {
					this.form.pic = ''
				}
				this.mediaSectionCurrent = select.value
			},
			handleSecionChange(select) {
				this.sectionCurrent = select['value']
				if (this.sectionCurrent === 1) {
					this.queryParams.page = 1
					this.getList()
				}
			},
			handleSubmit() {
				if (!this.form.content) {
					this.$toast("请输入发布内容")
					return
				} else if (!this.form.pic) {
					this.$toast("请上传发布图片或视频")
					return
				}
				this.$modal.loading("发布中").then(() => {
					trends(this.form).then(res => {
						this.$modal.closeLoading()
						this.$toast(res.msg)
						this.form.content = ''
						this.form.pic = ''
					}).catch(this.$modal.closeLoading())
				})

			}
		}
	}
</script>
<style lang="scss">
	@import '@/common/css/var.scss';

	page {
		// background-color: #fff;
		height: 100%;
	}

	.main-fixed-bottom {
		@include fixed-bottom;
	}

	.header {
		padding: 20rpx 24rpx;
		position: sticky;
		@include sticky-top;
		z-index: 999;
		// background-color: inherit;
	}
</style>
<style lang="scss" scoped>
	.container {
		background-color: inherit;

		.main {
			padding: 0 24rpx 20rpx 24rpx;
		}

		.tag {
			margin: 20rpx 0;
			display: flex;

			.tag-item {
				padding: 16rpx 32rpx;
				background-color: #FFFFFF;
				border-radius: 32rpx;
				font-weight: 400;
				font-size: 24rpx;
				text-align: center;
				margin-right: 20rpx;
				flex-shrink: 0;
				box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.08);
			}

			.tag-active {
				background-color: #202020;
				color: #fff;
			}
		}

		::v-deep .textarea-placeholder {
			font-weight: 400;
			font-size: 30rpx;
			color: #B2B8C1;
			line-height: 42rpx;
		}

		::v-deep .u-textarea {
			padding: 0;
			font-weight: 400;
			font-size: 30rpx;
		}

		::v-deep.uni-textarea-textarea {
			color: #202020 !important;
		}

		.album {
			@include flex;
			align-items: flex-start;

			&__avatar {
				background-color: $u-bg-color;
				padding: 5px;
				border-radius: 3px;
			}

			&__content {
				margin-left: 10px;
				flex: 1;
			}
		}

		.video {
			border-radius: 12rpx;
			overflow: hidden;
			// background-color: #eee;
			display: flex;
			align-items: center;
			justify-content: center;
			width: max-content;
			position: relative;

			.video-play {
				position: absolute;
				z-index: 99;
			}
		}
	}
</style>